<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" th:href="@{/assets/css/colorbox.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/My97DatePicker/skin/WdatePicker.css}"/>
<head th:include="fragments/head::header"/>
<body>
<div th:include="fragments/top::top"></div>
<div class="main-container" id="main-container">
    <div class="main-container-inner">
        <div th:include="fragments/left::left" class="sidebar" id="sidebar"></div>
        <div class="main-content">
            <div class="page-content">
                <div th:include="fragments/student_info::student_info"
                     th:style="${session.studentInfoKey == null}? 'display:none'"></div>
                <h3 class="header smaller lighter blue">添加签证申请</h3>
                <div id="ulId" class=""></div>
                <br/>
                <form method="post" id="edit">
                    <input type="text" th:value="${studentInfo.studentNo}" name="studentNo" style="display: none"/>
                    <input type="text" id="input_nation" th:value="${studentInfo.nationId}" style="display: none"/>
                    <input type="text" id="input_nationStatus" th:value="${studentInfo.nationStatus}" style="display: none"/>

                    <input type="hidden" id="input_attachment" name="paymentSlip"/>
                    <div class="tab-pane fade in active">
                        <div class="container">
                            <div class="form-horizontal">
                                <div class="form-group" style="height:29px;display: none;" id="div_studentNation">
                                    <label class="col-sm-3 control-label no-padding-right blue">学生留学国家：</label>
                                    <select type="" class="col-sm-3 form-control input-sm" name="studentNation" style="width:190px;height:25px;" readonly="readonly">
                                        <option th:each="item: ${doubleSignCountry}" th:attr="nationId=${item.nationId}" th:value="${item.id}" th:text="${item.nationName}"></option>
                                    </select>
                                </div>
                                <div class="form-group" style="height:29px">
                                    <label class="col-sm-3 control-label no-padding-right blue">签证方式：</label>
                                    <select type="" class="col-sm-3 form-control input-sm" name="visaWay"
                                            style="width:190px;height:25px;">
                                        <option value="-1">请选择</option>
                                        <option value="1">电签</option>
                                        <option value="2">普签</option>
                                    </select>
                                    <label class="col-sm-3 control-label no-padding-right blue">送件日期：</label>
                                    <div class="input-group col-sm-3" style="padding-left:0px;">
                                        <input class="Wdate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
                                               style="width: 190px"
                                               name="sendDate" required="required"/>
                                    </div>
                                </div>
                                <div class="form-group" style="height:29px">
                                    <label class="col-sm-3 control-label no-padding-right blue">签证分类：</label>
                                    <select type="" class="col-sm-3 form-control input-sm" name="studentVisaStatus"
                                            style="width:190px;height:25px;">
                                        <option value="-1">全部</option>
                                        <option value="1">学生签证</option>
                                        <option value="0">非学生签证</option>
                                    </select>
                                    <label class="col-sm-3 control-label no-padding-right blue">签证类型：</label>
                                    <select type="" class="col-sm-3 form-control input-sm" name="visaType"
                                            style="width:190px;height:25px;">
                                        <option th:each="item: ${VisaType}" th:value="${item.id}"
                                                th:text="${item.visaName}"></option>
                                    </select>
                                </div>
                                <div class="form-group" style="height:29px;display: none;" id="div_160">
                                    <label class="col-sm-3 control-label no-padding-right no-padding-left blue">
                                        DS160编号：</label>
                                    <input class="col-sm-2" name="ds160No"/>
                                    <label class="col-sm-3 control-label no-padding-right blue">DS160安全问答答案：</label>
                                    <input class="col-sm-2" name="ds160Answer"/>
                                </div>
                                <div class="form-group" style="height:29px">
                                    <label class="col-sm-3 control-label no-padding-right blue">备注：</label>
                                    <textarea class="col-sm-2" name="visaComment"></textarea>
                                </div>
                                <div class="form-group" id="div_trial" style="height:29px;display: none;">
                                    <label class="col-sm-3 control-label no-padding-right no-padding-left blue">
                                        审案员：</label>
                                    <input type="hidden" name="checkNo" class="col-sm-2"
                                           th:value="${checkNo != null}?${checkNo}"/>
                                    <input readonly="readonly" name="checkName" class="col-sm-2"
                                           th:value="${checkName != null}?${checkName}"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <form method="post" action="/upload" id="form_file" enctype="multipart/form-data"
                      style="margin-top: 29px;">
                    <div class="tab-pane fade in active">
                        <div class="container">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right blue">支出凭单：</label>
                                    <div class="col-sm-6" style="padding-left: 0px;" id="div_attachment">
                                        <div class="widget-header">
                                            <h4>文件上传</h4>
                                        </div>
                                        <div class="widget-body">
                                            <div class="widget-main">
                                                <input name="fileInput" multiple="" type="file" id="id-input-file-3"/>
                                                <label>
                                                    <input type="checkbox" name="file-format" id="id-file-format"
                                                           class="ace"/>
                                                </label>
                                                <span style="color: #FF2F2F">*上传文件的格式为&nbsp;:&nbsp;&nbsp; .jpg，&nbsp;.png，&nbsp;.gif,&nbsp;.doc，&nbsp;.docx，&nbsp;.pdf</span>
                                                <input name="privateAccess" type="hidden" value="true"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="returnPage" class="btn btn-primary" data-dismiss="modal">返回</button>
                        <button type="button" class="btn btn-primary" id="submits">保存</button>
                    </div>
                    <div id="alert" class="alert alert-success" style="display: none;" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <span id="alertText"></span>
                    </div>
                </form>
                <br/><br/><br/><br/><br/><br/><br/><br/>
            </div>
        </div>
        <div th:include="fragments/bottom::bottom"></div>
    </div>

    <a href="#" id="btn-scroll-up"
       class="btn-scroll-up btn btn-sm btn-inverse"> <i
            class="icon-double-angle-up icon-only bigger-110"></i>
    </a>
</div>
<!-- Modal备注 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

        </div>
    </div>
</div>
<!-- Modal备注 -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <h2 style="color: green" id="result">审核通过</h2>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
            </div>
        </div>
    </div>
</div>
<div th:include="fragments/js::js"></div>
<script th:src="@{/assets/js/jquery.inputlimiter.1.3.1.min.js}"></script>
<script th:src="@{/assets/js/jquery.maskedinput.min.js}"></script>
<script th:src="@{/assets/js/bootstrap-tag.min.js}"></script>
<script th:src="@{/assets/js/ace-elements.min.js}"></script>
<script th:src="@{/assets/js/ace.min.js}"></script>
<script th:src="@{/assets/js/jquery.form.js}"></script>
<script th:src="@{/js/upload/upload.js}"></script>
<!-- page specific plugin scripts -->
<script th:src="@{/assets/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/assets/js/jquery.dataTables.bootstrap.js}"></script>
<script th:src="@{/assets/js/temp.js}" charset="UTF-8"></script>
<!--图片查看器-->
<script th:src="@{/assets/js/jquery.colorbox-min.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/My97DatePicker/WdatePicker.js}"></script>
<script th:src="@{/business/common.js}"></script>
<script type="text/javascript">
    jQuery(function ($) {
        var pageHelper = (function () {
            return {
                init: function () {
                    this.getQueryData();
                    this.handelQueryData();
                    this.render();
                    this.addEvent();
                },
                getQueryData: function () {
                    this.studentNo = GetQueryString("studentNo");
                    this.uploadComplete = true;
                    this.nationId = $("#input_nation").val();
                    this.nationStatus = $("#input_nationStatus").val();
                },
                handelQueryData: function () {

                },
                render: function () {
                    var _self = this;
                    var nationId = $("#input_nation").val();
                    if (nationId == "40" || nationId == "41")
                        _self.nationId = "4";
                    if (nationId == "4") {
                        $("#div_160").show();
                    }
                    if (nationId == "3" || nationId == "5") {
                        $("#div_trial").show();
                    }
                    console.log("nationStatus:" + _self.nationStatus);
                    if (_self.nationStatus == "1" || _self.nationStatus == "2" || _self.nationStatus == "3") {
                        $("#div_studentNation").show();
                        _self.nationId = $("select[name='studentNation']").children("option:eq(0)").attr("nationId");
                        console.log("nationId:" + _self.nationId);
                    }
                },
                addEvent: function () {
                    var _self = this;
                    $("#submits").click(function () {
                        if (!_self.uploadComplete) {
                            layer.msg('正在上传中,请稍后保存!');
                            return;
                        }
                        $(this).attr("disabled", "disabled");
                        if ($("select[name='visaWay']").children("option:selected").val() == "-1") {
                            layer.alert('请选择签证方式！', {icon: 0});
                            $("#submits").removeAttr("disabled");
                            return;
                        }
                        if ($("select[name='studentVisaStatus']").children("option:selected").val() == "-1") {
                            layer.alert('请选择签证分类！', {icon: 0});
                            $("#submits").removeAttr("disabled");
                            return;
                        }
                        if ($("input[name='sendDate']").val() == "") {
                            layer.alert('请填写送件日期！', {icon: 0});
                            $("#submits").removeAttr("disabled");
                            return;
                        }
                        if ($("#input_isAmerica").val() == "1") {
                            if ($("input[name='ds160No']").val() == "") {
                                layer.alert('请填写DS160编号！', {icon: 0});
                                $("#submits").removeAttr("disabled");
                                return;
                            }
                            if ($("input[name='ds160Answer']").val() == "") {
                                layer.alert('请填写DS160安全问答答案！', {icon: 0});
                                $("#submits").removeAttr("disabled");
                                return;
                            }
                        }
                        $.ajax({
                            url: "/visaApply/add",
                            type: "post",
                            data: $("#edit").serialize(),
                            success: function (data) {
                                if (data) {
                                    layer.confirm('操作成功，是否跳转到列表页？', {
                                        btn: ['确定', '取消'] //按钮
                                    }, function () {
                                        location.href = '/visaApply?studentNo=' + _self.studentNo;
                                    }, function () {
                                        $("#submits").removeAttr("disabled");
                                        location.reload(true);
                                    });
                                } else {
                                    $("#submits").removeAttr("disabled");
                                    $('#alertText').text('操作失败');
                                    $('#alert').attr('class', 'alert alert-danger').show();
                                    setTimeout("$('#alert').hide()", 2000);
                                    $("#myModal").modal("hide");
                                }
                            }
                        });
                    });
//                    $("select[name='studentNation']").change(function(){
//                        $this = $(this);
//                        _self.nationId = $this.children("option:selected").attr("nationId");
//                        $("select[name='studentVisaStatus']").trigger("change");
//                    });
                    $("select[name='studentVisaStatus']").change(function () {
                        $this = $(this);
                        var studentVisaStatus = $this.children("option:selected").val();
                        $.post("/visaApply/getVisaTypeListBy", {"studentVisaStatus": studentVisaStatus,"nation": _self.nationId }, function (data, status) {
                            $("select[name='visaType']").empty();
                            $.each(data, function (index, item) {
                                $("select[name='visaType']").append($("<option value=" + item.id + ">" + item.visaName + "</option>"));
                            });
                        })
                    });
                    $("#returnPage").click(function () {
                        location.href = '/visaApply?studentNo=' + _self.studentNo;
                    });
                    $('#id-input-file-3').ace_file_input({
                        style: 'well',
                        btn_choose: 'Drop files here or click to choose',
                        btn_change: null,
                        no_icon: 'icon-cloud-upload',
                        droppable: true,
                        thumbnail: 'small',//large | fit
                        // .jpg，&nbsp;.png，&nbsp;.gif,&nbsp;.doc，&nbsp;.docx，&nbsp;.pdf
                        allowExt: ['jpg', 'png', 'gif', 'doc', 'docx', 'pdf'],    //该属性只是对文件后缀的控制
                        before_change: function (files, dropped) {
                            return true;
                        },
                        before_remove: function () {
                            $("#input_attachment").val("");
                            return true;
                        },
                        preview_error: function (filename, error_code) {

                        }
                    }).on('change', function () {
                        //获取文件大小
                        if (!checkUp(this)) {
                            return false;
                        }

                        _self.uploadComplete = false;
                        layer.msg('正在上传中...', {
                            icon: 16,
                            shade: 0.01,
                            time: 5 * 10
                        });
                        $("#form_file").ajaxSubmit(function (message) {
                            _self.uploadComplete = true;
                            if (message) {
                                var fileName = message.obj;
                                var code = message.code;
                                if (code == "1") {
                                    layer.msg("请上传正确的文件格式!")
                                } else if (message.success) {
                                    $("#input_attachment").val(fileName);
                                    layer.msg("上传成功!");
                                }
                            } else {
                                $('#alertText').text('上传失败');
                                $('#alert').attr('class', 'alert alert-danger').show();
                                setTimeout("$('#alert').hide()", 2000);
                                $("#myModal").modal("hide");
                            }
                        });
                    });
                }
            }
        })();
        pageHelper.init();
    });
</script>
</body>
</html>